<template>
	<view id="couponPage">
		<view class="coupon-box" v-for="(item, index) in list" :key="item.id" :class="{'disabled': item.disabled}" @click="doCheck(item, index)">
			<view class="coupon-val">
				<image :src="item.disabled ? '../../static/img/100_d.png' : '../../static/img/100.png'" mode="aspectFill" class="coupon-num"></image>
				<view class="coupon-name">
					优惠券
				</view>
				<view class="unit">
					￥
				</view>
			</view>
			<view class="coupon-intro">
				<view class="coupon-tip">
					{{item.name}}
				</view>
				<view class="coupon-date">
					{{item.date}}
				</view>
				<image src="../../static/img/disabled.png" mode="aspectFill" class="status-ico" v-if="item.disabled" key="disalbed"></image>
				<image src="../../static/img/tick.png" mode="aspectFill" class="tick-ico" v-else-if="item.checked" key="checked"></image>
				<image src="../../static/img/cir.png" mode="aspectFill" class="tick-ico" v-else key="check"></image>
			</view>
		</view>
		
		<view class="die">
			已失效券
		</view>
		<view class="coupon-box disabled">
			<view class="coupon-val">
				<image src="../../static/img/100_d.png" mode="aspectFill" class="coupon-num"></image>
				<view class="coupon-name">
					优惠券
				</view>
				<view class="unit">
					￥
				</view>
			</view>
			<view class="coupon-intro">
				<view class="coupon-tip">
					满15000元可用
				</view>
				<view class="coupon-date">
					2019.09.10-2020.09.10
				</view>
				<image src="../../static/img/invaild.png" mode="aspectFill" class="status-ico" v-if="true"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import { coupons } from '../../utils/data.js'
	export default {
		data() {
			return {
				list: coupons,
				overdues: 1
			}
		},
		methods: {
			doCheck(coupon,i) {
				if (coupon.disabled) {
					return
				}
				this.list.map((item,index) => {
					item.checked = i === index
					return item
				})
				uni.navigateBack({
					delta: -1
				});
			}
		}
	}
</script>

<style>
.coupon-box {
	margin: 29upx auto 0;
	height: 190upx;
	background: url('../../static/img/coupon-bg.png') center center no-repeat;
	background-size: cover;
	width: 690upx;
	display: flex;
	font-size: 28upx;
}
.coupon-val {
	flex: 1 247upx 0;
	width: 247upx;
	text-align: center;
	padding: 30upx 0 45upx;
	text-align: center;
	position: relative;
}
.coupon-num {
	display: block;
	width: 109upx;
	height: 66upx;
	margin: 0 auto;
}
.coupon-name {
	margin: 19upx 0 0 0;
}
.unit {
	font-size:34upx;
	font-weight:500;
	color:rgba(17,24,33,1);
	position: absolute;
	top: 56upx;
	left: 29upx;
}
.coupon-intro {
	flex: 3 443upx 0;
	width: 443upx;
	position: relative;
}
.coupon-tip {
	font-size:34upx;
	font-weight:500;
	color:rgba(234,10,42,1);
	padding-top: 47upx;
}
.coupon-date {
	font-size:24upx;
	font-weight:500;
	color:rgba(234,10,42,1);
	margin-top: 47upx;
}
.tick-ico {
	width: 39upx;
	height: 39upx;
	position: absolute;
	top: 47upx;
	right: 49upx;
}
.disabled {
	background: url('../../static/img/coupon-bg-d.png') center center no-repeat;
	background-size: cover;
}
.disabled .unit {
	color: #CCCCCC;
}
.disabled .coupon-name {
	color: #CCCCCC;
}
.disabled .coupon-tip {
	color: #666666;
}
.disabled .coupon-date {
	color: #666666;
}
.status-ico {
	width: 75upx;
	height: 75upx;
	position: absolute;
	top: 27upx;
	right: 31upx;
}
.die {
	font-size:24upx;
	font-weight:500;
	color:rgba(234,10,42,1);
	text-align: center;
	height: 24upx;
	line-height: 24upx;
	background: url(../../static/img/die.png) center center no-repeat;
	background-size: contain;
	width: 690upx;
	margin: 47upx auto;
}
</style>
